<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-row v-for="(cols, index) in rows" :key="index" :gutter="gutter">
            <el-col v-for="(col, colIndex) in cols" :key="colIndex" :span="col.span">
                <template v-if="col.colType === 'button'">
                    <el-button v-if="col.include.includes('search')" type="primary" size="small" @click="search"
                        >查询</el-button
                    >
                    <el-button v-if="col.include.includes('export')" type="primary" size="small" @click="exportData"
                        >导出</el-button
                    >
                    <el-button v-if="col.include.includes('reset')" type="primary" size="small" @click="resetForm"
                        >重置</el-button
                    >
                </template>
                <template v-else>
                    <el-form-item :label="col.label" :prop="col.prop">
                        <template v-if="col.type === 'select-tree'">
                            <SelectChildDept v-model="form[col.prop]" show-parent placeholder="请选择所属单位" />
                        </template>
                        <template v-else-if="col.type === 'select'">
                            <SelectForm
                                v-model="form[col.prop]"
                                :code="col.code"
                                :default-value="col.defaultValue"
                                @select-change="(value, row) => selectChange(value, row, col)"
                            />
                        </template>
                        <template v-else-if="col.type === 'input'">
                            <InputForm
                                v-model="form[col.prop]"
                                :default-value="col.defaultValue"
                                @input-change="val => inputChange(val, col)"
                            />
                        </template>
                        <template v-else-if="col.type === 'date'">
                            <DatePickForm
                                v-model="form[col.prop]"
                                :default-value="col.defaultValue"
                                @date-change="val => dateChange(val, col)"
                            />
                        </template>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import InputForm from './InputForm'
import DatePickForm from './DatePickForm'
import SelectForm from './SelectForm'
export default {
    name: 'MyForm',
    components: {
        InputForm,
        DatePickForm,
        SelectForm
    },
    props: {
        rows: {
            type: Array,
            default() {
                return []
            }
        },
        gutter: {
            type: Number,
            default: 10
        }
    },
    data() {
        return {
            form: {}
        }
    },
    methods: {
        selectChange(value, row, col) {
            this.form[col.prop] = value
        },
        inputChange(value, col) {
            this.form[col.prop] = value
        },
        dateChange(value, col) {
            this.form[col.prop] = value
        },
        search() {
            this.$emit('search', { ...this.form })
        },
        exportData() {
            console.log('导出')
        },
        resetForm() {
            this.$refs.form.resetFields()
        }
    }
}
</script>

<style></style>
